<template>
    <div>
        <BasicTable @register="registerTable">
            <template #toolbar>
                <a-button v-auth="Permission.ADD" type="primary" @click="handleCreate"> 新增 </a-button>
                <a-button v-auth="Permission.DEL" color="error" v-show="rowSelected" @click="handleBatchDelete"> 删除
                </a-button>
            </template>
            <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'action'">
                    <TableAction :actions="createActions(record)" />
                </template>
                <template v-else-if="column.key === 'lockStatus'">
                    {{ formatDictValue(lockStatusDicts, record.lockStatus) }}
                </template>
                <template v-else-if="column.key === 'userType'">
                    {{ formatDictValue(userTypeDicts, record.userType) }}
                </template>
            </template>
        </BasicTable>
        <UserDrawer @register="registerDrawer" @success="handleSuccess" />
    </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, ref } from 'vue';
import UserDrawer from './drawer.vue';
import { Permission, columns, searchFormSchema } from './index-option';
import { getDictDetailListApi } from '/@/api/sys/dict';
import { delUserApi, getUserPageApi } from '/@/api/sys/user';
import { useDrawer } from '/@/components/Drawer';
import {
    ActionItem,
    BasicTable,
    EditRecordRow,
    TableAction,
    useTable
} from '/@/components/Table';
import { useMessage } from '/@/hooks/web/useMessage';
import { formatDictValue } from '/@/utils';

const lockStatusDicts = ref([]);
const userTypeDicts = ref([]);
onBeforeMount(async () => {
    const lockStatusDictsResult = await getDictDetailListApi({ code: 'data_status' });
    lockStatusDicts.value = lockStatusDictsResult.data;
    const userTypeDictsResult = await getDictDetailListApi({ code: 'user_type' });
    userTypeDicts.value = userTypeDictsResult.data;
});

const rowSelected = ref(false);
const [registerTable, { reload, getSelectRowKeys }] = useTable({
    title: '系统用户列表',
    api: getUserPageApi,
    rowKey: 'userId',
    columns,
    formConfig: {
        labelWidth: 80,
        schemas: searchFormSchema,
    },
    useSearchForm: true,
    bordered: true,
    canResize: true,
    ellipsis: true,
    rowSelection: {
        type: 'checkbox',
        onChange: (selectedRowKeys) => {
            rowSelected.value = selectedRowKeys.length > 0;
        }
    },
    actionColumn: {
        width: 150,
        title: '操作',
        dataIndex: 'action'
    },
});

const [registerDrawer, { openDrawer }] = useDrawer();

const { createMessage, createConfirm } = useMessage();

function handleCreate() {
    openDrawer(true, { isUpdate: false });
}

function handleEdit(record: Recordable) {
    openDrawer(true, {
        record,
        isUpdate: true,
    });
}

function handleDelete(userIds: string[]) {
    delUserApi(userIds).then((res) => {
        createMessage.success(res.msg);
        handleSuccess();
    });
}

function handleBatchDelete() {
    createConfirm({
        iconType: 'warning',
        title: '确认提示',
        content: '请确认是否删除选中的系统用户？',
        onOk: () => {
            handleDelete(getSelectRowKeys());
        }
    });
}

function handleSuccess() {
    reload();
}

function createActions(record: EditRecordRow): ActionItem[] {
    return [
        {
            icon: 'clarity:note-edit-line',
            label: '编辑',
            auth: Permission.EDIT,
            onClick: handleEdit.bind(null, record),
        },
        {
            icon: 'ant-design:delete-outlined',
            label: '删除',
            auth: Permission.DEL,
            color: 'error',
            popConfirm: {
                title: '是否删除系统用户？',
                confirm: handleDelete.bind(null, [record.userId]),
            },
        },
    ];
}
</script>
